<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
	/*结合实际html结构--通配【合理】*/
	*{
		font: 16px "微软雅黑";
		/*去掉内外边距*/
	    margin: 0;
		padding: 0;
		/*无序列表：有样式---“去一个样式：列表项”*/
		list-style-type: none;
		/*
		无序列表：有样式---去全部样式：list-style-type 去列表项样式
			                         list-style-position: 去列表项标记位置样式
									 list-style-image: 去列表项图片标记样式
		*/
		list-style: none;
			}
			/**左栏效果
			 * 1.左栏空间区域【aside】  235*460  背景颜色
			 * 2.左栏区域内容【li】加权 235*50  相对定位--挂靠点【固定位置】
			 * 3.给每个区域内容【li】加鼠标移动上去改背景颜色
			 * 4.左栏弹出框：400*450 1像素边框 绝对定位--微调
			 */
		aside{
			width: 235px;
			height: 500px;
			background: #ababab;
			margin: 20px 50px;
		}
		aside ul.sidebar li{
			width: 205px;
			height: 50px;
			/*相对定位--挂靠点*/
			position:relative;
			text-align: left;
			line-height: 50px;
		    top: 15px;
			padding-left:30px;
		}
		aside ul.sidebar li:hover{
			background: #eee;
		}
		aside ul.sidebar div.out{
			width: 400px;
			height: 495px;
			border: 1px solid red;
			/* 挂靠位：绝对定位：按照相对定位基点开始定位 */
			position: absolute;
			left: 285px;
			/*显示与隐藏  JavaSxript[JQuery框架]*/
			display: none;
		}
		/* 新增样式 */
		aside ul.sidebar li span{
			b order: 1px solid red;
			float: right;
			/* 间隙：内边框 */
			padding-right: 50px;
		}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构  结构化标记【语义化标签】  aside元素 针对：左栏、广告、弹出效果...有利于SEO优化
		     之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】
			-->
		<aside>
			<ul class="sidebar">
				<!-- 弹出框 -->
				<div class="out"></div>
				<li>手机 平板 电话卡<span>></span></li>
				<li>电脑 盒子<span>></span></li>
				<li>路由器 智能硬件<span>></span></li>
				<li>移动电源 插线板<span>></span></li>
				<li>耳机 音箱<span>></span></li>
				<li>电池储存卡<span>></span></li>
				<li>保护套 后盖<span>></span></li>
				<li>贴膜 其他配件<span>></span></li>
				<li>米兔 服装<span>></span></li>
				<li>箱包 其他周边<span>></span></li>
			</ul>
		</aside>
		<script>
			
			$("aside ul.sidebar li").hover(function(){
				$("aside ul.sidebar div.out").css("display","block");
			},function(){
				$("aside ul.sidebar div.out").css("display","none");
			});
		</script>
	</body>
</html>
